<template>
    <div style="background-color: #ffffff;">
        <van-row justify="space-around" align="center">
            <van-col @click="show = true">
                <van-icon name="wap-nav" size="30" />
            </van-col>
            <van-col span="18">
                <van-search v-model="search_value" placeholder="请输入搜索关键词" @search="searchMusic()" v-on:blur="blur()" v-on:focus="focus()" />
            </van-col>
            <van-col>
                <van-icon name="enlarge" size="30" />
            </van-col>
        </van-row>
    </div>

</template>

<script>
    import {
        reactive,
        toRefs,
        ref,
        unref,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
        defineComponent,
        inject,
        provide
    } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex';
    export default ({
        name: 'topSearch',
        setup() {
            const router = useRouter();
            const store = useStore;
            const data = reactive({})
            const show = ref(false);

            //搜索歌曲
            const searchMusic = () => {
                console.log(data.search_value);
            }
            //搜索失去焦点
            const blur = () => {
                console.log('失去了焦点');
            }
            //搜索获取焦点
            const focus = () => {
                console.log('获取了焦点');

            }

            return {
                ...toRefs(data),
                router,
                store,
                show,
                searchMusic,
                blur,
                focus,
            }
        }

    })
</script>

<style>

</style>